import React, { Component } from 'react'

import MyBtn from './MyBtn'


export default class MyState extends Component {
  state = {
    count: 100,
    msg: '怎么这儿神佛已满天,却全是一片无助的笑脸',
    flag: true,
    word: '陪你去流浪',
    number: 1
  }

  handleClick = () => {

    // this.state.count++
    this.setState({
      count: this.state.count + 1
    })

  }

  changeMsg = (msg) => {
    this.setState({
      msg
    }, () => {
      console.log("msg更新成功");
    })
  }

  onChange = (e) => {
    this.setState({
      word: e.target.value
    })
  }

  render() {
    const { count, msg, flag, word, number } = this.state
    return (
      flag ? <div>
        <div>
          <h3>React - State - 数据响应式</h3>
          <h4>count = {count}</h4>
          <h4>msg = {msg}</h4>
          <h4>word = {word}</h4>
          <h4>number = {number}</h4>
        </div>
        <MyBtn onClick={this.handleClick} text={count}></MyBtn>
        <br />
        <MyBtn onClick={() => this.changeMsg('陪你去流浪')} text='修改 msg'></MyBtn>
        <br />
        <div>
          <input type='text' value={word} onChange={this.onChange} />
        </div>
        <br />
        <MyBtn onClick={() => this.setState({ flag: !flag })} text='flag 取反'></MyBtn>
      </div >
        :
        <div>
          <h1>404</h1>
          <MyBtn onClick={() => this.setState({ flag: !flag })} text='flag 取反'></MyBtn>
        </div>
    )
  }
}
